<template>
    <view id="view_warper" ref="pdfDom" :class="{ pdf_download: pdfDownload }"
        class="flex_1 margin_left_10 cardBg view_warper template" @click="classKey = ''">
        <view class="inquiry-title">火灾现场勘验笔录</view>
        <p ref="time" class="t-a-r">
            第
            <span :class="{ active: classKey == 'time' }">{{ formData.time || '1' }}</span>
            次勘验
        </p>
        <p>
            勘验时间：<span ref="startTime" :class="{ active: classKey == 'startTime' }">{{ parseTime(formData.startTime,
                '{y}年{m}月{d}日{h}时{i}分') || '--' }}</span>
            至
            <span ref="endTime" :class="{ active: classKey == 'endTime' }">{{ parseTime(formData.endTime,
                '{y}年{m}月{d}日{h}时{i}分') || '--' }}</span>
        </p>
        <p>勘验地点：</p>
        <p v-if="formData.address" ref="address">
            <span :class="{ active: classKey == 'address' }">
                {{ formatAddress }}
            </span>
        </p>
        <p>勘验人员姓名、单位、职务（含技术职务）：</p>
        <p ref="inquestPersons">
            <span v-if="formData.inquestPersons" :class="{ active: classKey == 'inquestPersons' }">
                {{ formData.inquestPersons || '--' }}
            </span>
        </p>
        <p>勘验气象条件（天气、风向、温度）：</p>
        <p ref="inquestWeather">
            <span :class="{ active: classKey == 'inquestWeather' }">{{ formData.inquestWeather || '--' }}</span>
        </p>
        <p>勘验情况：</p>
        <view class='inquest-content' ref="inquestContent" :class="{ active: classKey == 'inquestContent' }"
            v-html="formData['inquestContentRender']"> </view>
        <p>一、环境勘验：</p>
        <view class='inquest-content' ref="environInquestContent" :class="{ active: classKey == 'environInquestContent' }"
            v-html="formData['environInquestContentRender']"> </view>
        <p>二、初步勘验：</p>
        <view class='inquest-content' ref="firstInquestContent" :class="{ active: classKey == 'firstInquestContent' }"
            v-html="formData['firstInquestContentRender']"></view>
        <p>三、细项勘验：</p>
        <view class='inquest-content' ref="secondInquestContent" :class="{ active: classKey == 'secondInquestContent' }"
            v-html="formData['secondInquestContentRender']"></view>
        <p ref="threeInquestContent">四、专项勘验：</p>
        <view :class="{ active: classKey == 'threeInquestContent' }" v-html="formData['threeInquestContentRender']"></view>
        <p>勘验负责人（签名）：<span v-if="!formData.proveLeaderSign">--</span>
            <img v-else height="40" width="60" :src="formData.proveLeaderSign" alt="" />
            记录人（签名）：<span v-if="!formData.proveRecorderSign">--</span>
            <img v-else height="40" width="60" :src="formData.proveRecorderSign" alt="" />
        </p>
        <p>勘验人（签名）：<span v-if="!formData.provePersonSign">--</span><img v-else height="40" width="60"
                :src="formData.provePersonSign" alt="" /></p>
        <view v-if='formData.inquestPartyList.length > 0' v-for="(item, index) in formData.inquestPartyList" :key="index"
            :class="{ active: classKey == 'proveDoPerson' }">
            <p>证人或当事人（签名）：
                <span v-if="item.proveDoPersonName">{{ item.proveDoPersonName }}</span>
                <img v-if='item.proveDoPersonNameSign' height="40" width="60" :src="item.proveDoPersonNameSign" alt="" />
                时间：<span>{{ parseTime(item.proveDoPersonBirth, '{y}年{m}月{d}日') || '--' }}</span>
                身份证号码：<span>{{ item.proveDoPersonCardNum || '' }}</span>
            </p>
            <p>单位或住址：<span>{{ item.proveDoPersonOrg || '' }}</span></p>
        </view>
    </view>
</template>

<script>
import { checkType } from '@/utils/index';
export default {
    props: {
        formData: {
            type: Object,
            default: () => ({ startTime: new Date(), endTime: newDate() })
        },
        pdfDownload: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        formatAddress() {
            let address = this.formData.address;
            if (!address || !address.length) return '';
            if (checkType(address) === 'string') {
                return address.split(',')[2]
            } else if (checkType(address) === 'array') {
                return address[2];
            }
        }
    },
    data() {
        return {
            classKey: ''
        }
    }
}
</script>
<style scoped lang="scss">
.view_warper {
    color: #000;
    font-size: 32rpx;
    overflow-y: auto;
    padding-bottom: 140rpx;

    &.pdf_download {
        padding: 127rpx 158rpx;
        font-size: 44rpx;
    }

    &.cardBg {
        background-color: #fff;
        padding-left: 20rpx;
        padding-right: 50rpx;
    }

    .Editor,
    .inquest-content {
        word-wrap: break-word;
        word-break: break-all;
    }

    .inquiry-title {
        text-align: center;
        font-weight: bold;
        font-size: 50rpx;
    }
}
</style>